<template>
  <a-scrollbar>
    <a-form
      v-model="config"
      size="mini"
      label-align="right"
      layout="horizontal"
      :label-col-props="labelColProps"
      :wrapper-col-props="wrapperColProps"
    >
      <a-form-item
        field="model"
        tooltip=""
        label="组件类型"
      >
        <a-tag color="pinkpurple" bordered>
          {{ config.name }}
        </a-tag>
      </a-form-item>
      <a-form-item
        field="model"
        tooltip=""
        label="组件ID"
      >
        <a-input v-model="config.id" readonly />
      </a-form-item>
      <a-form-item
        field="size"
        tooltip=""
        label="选项卡大小"
      >
        <a-radio-group v-model="config.config.size" type="button">
          <a-radio value="mini">迷你</a-radio>
          <a-radio value="small">小</a-radio>
          <a-radio value="medium">中</a-radio>
          <a-radio value="large">大</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="position"
        tooltip=""
        label="选项卡位置"
      >
        <a-radio-group v-model="config.config.position" type="button">
          <a-radio value="left">左</a-radio>
          <a-radio value="right">右</a-radio>
          <a-radio value="top">上</a-radio>
          <a-radio value="bottom">下</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="type"
        tooltip=""
        label="选项卡类型"
      >
        <a-select v-model="config.config.type" popup-container="#ItemSetting">
          <a-option value="line">line</a-option>
          <a-option value="card">card</a-option>
          <a-option value="card-gutter">card-gutter</a-option>
          <a-option value="text">text</a-option>
          <a-option value="rounded">rounded</a-option>
          <a-option value="capsule">capsule</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="trigger"
        tooltip=""
        label="触发方式"
      >
        <a-radio-group v-model="config.config.trigger" type="button">
          <a-radio value="click">click</a-radio>
          <a-radio value="hover">hover</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="justify"
        tooltip="高度撑满容器，只在水平模式下生效。"
        label="高度"
      >
        <a-switch
          v-model="config.config.justify"
          type="round"
        >
          <template #checked>
            撑满容器
          </template>
          <template #unchecked>
            不撑满容器
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="animation"
        tooltip="是否开启选项内容过渡动画"
        label="过渡动画"
      >
        <a-switch
          v-model="config.config.animation"
          type="round"
        >
          <template #checked>
            开启
          </template>
          <template #unchecked>
            关闭
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="headerPadding"
        tooltip="选项卡头部是否存在水平边距。仅对 type 等于 line、text 类型的选项卡生效"
        label="水平边距"
      >
        <a-switch
          v-model="config.config.headerPadding"
          type="round"
        >
          <template #checked>
            存在
          </template>
          <template #unchecked>
            不存在
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="hideContent"
        tooltip=""
        label="是否隐藏内容"
      >
        <a-switch
          v-model="config.config.hideContent"
          type="round"
        >
          <template #checked>
            是
          </template>
          <template #unchecked>
            否
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="onChangeFunction"
        tooltip=""
        label="TabChange"
      >
        <a-button
          type="primary"
          shape="round"
          @click="editOnChange"
        >
          <template #icon>
            <icon-edit />
          </template>
          编辑事件
        </a-button>
        <code-editor
          ref="codeEditorRef"
          v-model:code="config.config.onChangeFunction"
        />
      </a-form-item>
    </a-form>
    <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0" />
    <br />
    <a-form
      v-model="config"
      size="mini"
      label-align="right"
      layout="vertical"
      :label-col-props="labelColProps"
      :wrapper-col-props="wrapperColProps"
    >
      <a-form-item
        field="wrap"
        tooltip=""
        label="标签页配置"
      >
        <a-layout>
          <a-space direction="vertical" :size="10" style="display: block;">
            <template v-for="item in config.formList" :key="item.id">
              <a-row justify="space-between">
                <a-col :span="6">
                  <a-checkbox
                    :model-value="item.id === config.config.defaultActiveKey"
                    @change="checkTab(item.id)"
                  >
                    <a-tag color="arcoblue">
                      {{ item.id }}
                    </a-tag>
                  </a-checkbox>
                </a-col>
                <a-col :span="12">
                  <a-input v-model="item.config.name" />
                </a-col>
                <a-col :span="2">
                  <a-button status="danger" @click.stop="deleteTab(item.id)">
                    <template #icon>
                      <icon-delete />
                    </template>
                  </a-button>
                </a-col>
              </a-row>
            </template>
            <a-button type="primary" style="width: 100%;" @click.stop="addTab">
              <template #icon>
                <icon-plus />
              </template>
              增加标签页
            </a-button>
          </a-space>
        </a-layout>
      </a-form-item>
    </a-form>
  </a-scrollbar>
</template>

<script lang="ts" setup>
import { defineModel, ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import { cloneDeep, uniqueId } from 'lodash';
import { DEFAULT_TAB_CONFIG } from '@/components/form-design/item-select/config/config';
import CodeEditor from '@/components/code-editor/index.vue';
import { labelColProps, wrapperColProps } from '../config';

const config = defineModel('config', { type: Object, default: { formList: [] } });

const deleteTab = (id: string) => {
  if (config.value.formList.length === 1) {
    Message.warning('最后一个不可删除');
    return;
  }
  config.value.formList = config.value.formList.filter((item: { id: string; }) => item.id !== id);
};

const addTab = () => {
  const tab = cloneDeep(DEFAULT_TAB_CONFIG);
  tab.id = uniqueId(`${tab.type}_`);
  tab.config.name = uniqueId('标签页');
  config.value.formList.push(tab);
};

const checkTab = (id: any) => {
  config.value.config.defaultActiveKey = id;
};

const codeEditorRef = ref();

const editOnChange = () => {
  codeEditorRef.value.open();
};
</script>

<script lang="ts">
export default {
  name: 'TabsContainerSetting'
};
</script>

<style scoped>

</style>